<template>
    <el-main>
      <div class="con1_box">
        <div>
          <el-form ref="form" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="员工编号">
                  <!-- v-model="form.epmID" -->
                  <el-input v-model="form.empId" placeholder="请输入员工编号" clearable></el-input>
                </el-form-item>
                <el-form-item label="员工姓名">
                  <el-input v-model="form.name" placeholder="请输入员工姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="是否启用" style="width: 180px;">
                  <el-select v-model="form.is_enable" clearable placeholder="请选择" @change="statusChange()">
                    <el-option key="是" label="是" value="是"></el-option>
                    <el-option key="否" label="否" value="否"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="入职日期" class="date_picker">
                  <!-- <el-date-picker
                    v-model="form.hire_date"
                    type="daterange"
                    clear
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker> -->
                  <el-date-picker v-model="form.hire_date[0]" type="date" placeholder="开始时间">
                  </el-date-picker>&nbsp;至&nbsp;
                  <el-date-picker v-model="form.hire_date[1]" type="date" placeholder="结束时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="所属部门">
                  <el-select v-model="form.deptName" clearable placeholder="请选择部门">
                    <el-option
                      v-for="item in dept"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label">
                    </el-option>
                  </el-select>
                  <!-- <el-input v-model="form.deptName" placeholder="请输入员工所属部门" clearable></el-input> -->
                </el-form-item>
                
              </el-col>
              <el-col><el-button type="primary" icon="el-icon-search" @click="searchData" style="margin-bottom: 20px;">搜索</el-button></el-col>
            </el-row>
          </el-form>
          <!-- :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize) -->
          <el-table :data="tableData.staffList" :stripe="stripe" v-loading="loading"
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
            :default-sort="{ prop: 'hire_date', order: 'descending' }" :current-page.sync="currentPage" border sortable>
            <el-table-column fixed="left" type="selection" width="60"></el-table-column>
            <el-table-column prop="empId" label="员工编号" width="150"></el-table-column>
            <el-table-column prop="name" label="员工姓名" width="150"></el-table-column>
            <el-table-column prop="deptName" label="所属部门" width="200"></el-table-column>
            <el-table-column prop="birth_date" label="出生日期" width="150"></el-table-column>
            <!-- 方式一 prop="date" -->
            <el-table-column prop="hire_date" label="入职日期" width="150" sortable></el-table-column>
            <!-- 方式二 gender-->
            <!-- <el-table-column label="入职日期" width="150" sortable>
              <template slot-scope="{row}">
                <span>{{ row.hire_date }}</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="address" label="家庭地址"></el-table-column>
            <!-- <el-table-column prop="is_enable" label="是否启用"></el-table-column> -->
            <el-table-column prop="is_enable" label="是否启用" width="100"
            :filters="[{ text: '是', value: '是' }, { text: '否', value: '否' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.is_enable === '是' ? 'success' : 'danger'"
                  disable-transitions>{{scope.row.is_enable}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="状态" width="100" style="text-align: center;"
            :filters="[{ text: '在职', value: '在职' }, { text: '离职', value: '离职' }]"
            :filter-method="filterType"
            filter-placement="bottom-end">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.type === '在职' ? 'success' : 'danger'"
                  disable-transitions>{{scope.row.type}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <!-- <router-link :to="{ path: '/preview', query: { Id: scope.row.id } }" target='_blank' title="预览">
                  <el-button type="primary" size="mini" icon="el-icon-view"></el-button>
                </router-link> -->
                <!-- <router-link :to="'/articletest/edit1/' + scope.row.id"> -->
                <router-link :to="{ path: '/emp/edit', query: { Id: scope.row.empId, type: 'edit' } }" title="编辑">
                  <el-button type="primary" size="mini" icon="el-icon-edit" style="margin-left: 10px;"></el-button>
                </router-link>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="delContent(scope.row.id)"
                  style="margin-left: 10px;" title="删除"></el-button>
              </template>
  
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="pagination">
        <el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :hide-on-single-page="show" :page-sizes="[10, 20, 50]" :page-size="tableData.pagesize"
          :current-page.sync="currentPage" layout="total,sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-main>
  </template>
  <script>
  //  引入左侧菜单组件
  import { getStaffList } from '@/api/newUsertest'
  export default {
    components: {},
    data () {
      return {
        loading: false,
        // direction: 'ltr',
        input3: '', //搜索关键词
        select: '',  //下拉框选择
        stripe: true,//是否为斑马纹 table
        // 页码
        currentPage: 1,
        pagesize: 10,
        total: 0,
        // tableData: Array(50).fill(item),
        show: false,
        needTagsView: true, //标签是否显示
        fixedHeader: false,
        screenWidth: null, //屏幕宽度
  
        activeTabs: 'all',  //tabs 
  
        columnActive: "/",
        // 模拟列表数据
        tableData: [],
        dept:[{
            value: '0',
            label: '行政办公室'
          }, 
          {
            value: '1',
            label: '人力资源部'
          }, 
          {
            value: '2',
            label: '工会办公室'
          }, 
          {
            value: '3',
            label: '安全监察'
          }, 
          {
            value: '4',
            label: '质控管理部'
          }, 
          {
            value: '5',
            label: '信息技术部'
          }, 
          {
            value: '6',
            label: '数智企业部'
          }
        ],
        // 搜索字段
        form: {
          empId: '',  //搜索输入的值 姓名
          name: '',//搜索输入的值 所属单位
          deptName: '', //部门名称
          is_enable:'',
          hire_date:[] //入职日期
        },
  
  
      }
    },
    computed: {
  
    },
  
    mounted () {  //挂载后
      this.fetchData()
    },
    watch: {
      screenWidth: {
        handler: function (val) {
          // if (val < 450) {
          //   console.log(val+'屏幕宽度小于900px')
          //   this.pagecount=5
          // } else {
          //   this.pagecount=7
          // }
        },
        immediate: true,
        deep: true
      },
    },
    methods: {
      fetchData () {
        this.GetList()
      },
      handleSizeChange (val) {
        this.pagesize = val;
      },
      handleCurrentChange (val) {
        this.currentPage = val;
        this.GetList()
      },
      // 员工账号是否启用
      filterTag(value, row) {
        return row.is_enable === value;
      },
      // 员工状态
      filterType(value, row) {
        return row.type === value;
      },
      // 查询数据
      statusChange () {
        console.log(this.form.is_enable)
        // this.getNoticeList()
      },
      // 获取列表数据
      GetList () {
        // debugger;
        // if (JSON.parse(localStorage.getItem("columnKeyObj")).pageKey == "ds_HYWJ_YGTH"&&this.activeTabs == 'all') {
        //     this.columnActive = JSON.parse(localStorage.getItem("columnKeyObj")).pageKey;
        //     this.tableData = this.tableData1
        // } else{
        this.loading = true;
        let params = {
          key: this.input_name,
          pageSize: 10,
          currentPage: this.currentPage,
          form: this.form
        };
        getStaffList({ params }).then(res => {
          if (res.code == 20000) {
            this.tableData = res.data
            this.currentPage = res.data.pagenum
            this.loading = false;
          }
        })
      },
  
      // 查看
      handleClick (res) {
        console.log(res)
        const h = this.$createElement;
        this.$msgbox({
          title: '查看',
          center: true,
          message: h('div', { style: 'text-align: left;' }, [
            h('p', null, [
              h('span', null, '日期: '),
              h('span', { style: 'color: teal;margin-left:20px;' }, res.date)
            ]),
            h('p', { style: 'margin-top:10px;' }, [
              h('span', null, '姓名: '),
              h('span', { style: 'color: teal;margin-left:20px;' }, res.name)
            ]),
            h('p', { style: 'margin-top:10px;' }, [
              h('span', null, '地址: '),
              h('span', { style: 'color: teal;margin-left:20px;' }, res.address)
            ]),
          ]),
          showCancelButton: true,
          confirmButtonText: '导出',
          cancelButtonText: '关闭',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        }).catch(action => {
  
        });
      },
      // 编辑
      editTap (res) {
        debugger
        let routerData = this.$router.resolve("/test/edit/" + res.id);
        window.open(routerData.href, "_blank");
      },
      // 删除
      deleteRow (index, rows) {
        this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 搜索
      searchData () {
        this.loading = true;
        this.GetList()
        // const search = this.input_name;
        // const search2 = this.input_unit;
        // debugger;
        //   if(search!==''){
        //     this.tableData=this.tableData.filter((dataNews) => {
        //       return Object.keys(dataNews).some((key) => {
        //         return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
        //       });
        //     })
  
        //   }
        //   if(search2!==''){
        //     this.tableData=this.tableData.filter((dataNews) => {
        //       return Object.keys(dataNews).some((key) => {
        //         return String(dataNews[key]).toLowerCase().indexOf(search2) > -1;
        //       });
        //     })
  
        //   }
        //   if(search==''&&search2==''){
        //       this.tableData = this.tableData1
        //   }
        //   setTimeout(() => {
        //       this.loading = false;
        //     }, 500);
  
      }
  
    }
  }
  </script>
  <style>
  .cell {
    white-space: nowrap !important;
  }
  
  .el-drawer {
    display: block;
    min-width: 200px !important;
  }
  
  .el-drawer__body {
    overflow: hidden;
  }
  .date_picker {
    white-space: nowrap;
    width: 545px !important;
  }
  @media(min-width:1200px) {
    .el-drawer {
      display: none;
    }
  }
  @media(max-width:588px) {
    .date_picker {
      white-space: normal;
      text-align:center;
    }
  }
  @media(max-width:450px) {
    .el-main {
      padding: 10px;
    }
  }
  
  
  </style>
  <style scoped lang="scss">
  .el-scrollbar__wrap {
    overflow: hidden;
  }
  
  .con1_box {
    text-align: right;
  }
  
  .el-popper {
    margin-top: 0;
  }
  
  .el-form {
    .el-form-item {
      float: left;
      width: 300px;
    }
  }
  
  .el-input-group {
    width: 100%;
  }
  
  .pagination {
    margin-top: 30px;
  }
  
  .hidden-lg-and-up .el-button {
    background: none;
    border: none;
    padding: 0;
    font-size: 20px;
  }
  
  .hidden-lg-and-up .el-button:hover {
    color: unset;
  }
  
  .mobile_nav>.el-menu {
    width: 200px;
    background-color: #fff;
    box-shadow: 1px 2px 3px #000;
    text-align: left;
  }
  
  @media screen and (max-width:1200px) {
    .el-main {
      width: 100%;
    }
  
    .menu_box {
      height: 100%;
    }
  
  }
  </style>
  